<template>

  <el-container class="home-container">

    <el-header>
      <div>
        <img src="../assets/favicon.png" alt="">
        <span>VUE学习结合Spring Boot前后端分离项目</span>
      </div>

      <el-button type="primary" @click="logout">退出</el-button>
    </el-header>

    <el-container>
      <el-aside :width=" collapse ? '64px': '200px'">
        <div class="iconMenu" @click="isopen">
          <span class="el-icon-menu"></span>
        </div>
        <!--                                                                            :unique-opened="true"-->
        <el-menu background-color=" #0077aa" unique-opened
                 :collapse="collapse" :collapse-transition="false" router :default-active="indexPath">
          <el-submenu :index="item.id+''" :key="item.id+''" v-for="item in items">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.menuName}}</span>
            </template>

            <el-menu-item-group>
              <el-menu-item :index="'/' + menu.path" :key="menu.id +''" v-for="menu in item.items"
                            @click="clickMenu('/' + menu.path)">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{menu.menuName}}</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>

      </el-aside>


      <el-main>

        <router-view></router-view>

      </el-main>
    </el-container>

  </el-container>

</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        items: [],
        collapse: false,
        indexPath: ''
      }
    },
    created() {
      this.menuList();
      this.indexPath = window.sessionStorage.getItem('indexPath');
    },
    methods: {
      logout() {
        window.sessionStorage.clear();
        this.$router.push('/login')
      },
      async menuList() {
        await this.myAxios.get('/vueMenu/vue-menu/menuList').then(res => {
          this.items = res.result;
          // console.log(res);
        })
      },
      isopen() {
        this.collapse = !this.collapse;
      },
      clickMenu(indexPath) {
        // 只单单这种做法刷新页面就会重置了，所以加入下面的session
        this.indexPath = indexPath;
        //存在浏览器中，刷新了也还在
        window.sessionStorage.setItem('indexPath', indexPath);

      }
    }
  }


</script>

<style scoped lang="less">
  .home-container {
    width: 100%;
    height: 100%;
  }

  .el-header {
    background-color: #55a532;
    /*设置header内部分布方式为flex，*/
    display: flex;
    /*左右贴边*/
    justify-content: space-between;
    align-items: center;
    font-size: 20px;

    div {
      display: flex;
      align-items: center;

      span {
        margin-left: 130px;
      }

      img {
        max-height: 60px;
      }
    }
  }

  .el-aside {
    background-color: #0077aa;

    .el-menu {
      border-right: none;
    }
  }


  .el-main {
    background-color: rgba(202, 198, 204, 0.23);
  }

  .iconMenu {
    align-items: center;
    text-align: center;
    cursor: pointer;
  }
</style>
